<p>模板里面绑定数据</p>

<h1>{{student.username}}</h1>

<h6>{{msg}}</h6>


<div>

  {{content}}
<!--绑定HTML标签-->
  <span [innerHTML]="content" class="red" ></span>

</div>


 <h1>简单的运算</h1>
 1+2 ={{1+2}}

<h1>angular的数据循环</h1>

<ol>
  <li *ngFor="let item of arr">
    {{item}}
  </li>
</ol>

<br>


<ol>
  <li *ngFor="let item of list">
    {{item}}
  </li>
</ol>
<br><br>

<div [title]="student.username">
  把鼠标放上来
</div>


<br>


<ol>
  <li *ngFor="let item of userOneList">
    {{item.username}}   {{item.age}}
  </li>
</ol>


<br>


<ol>
  <li *ngFor="let car of cars">
    <h2> {{car.catName}}</h2>
      <ol>
        <li *ngFor="let car of car.list">
          <h3> {{car.title}} {{car.price}}</h3>
        </li>

      </ol>
  </li>
</ol>

<h1>循环数据，显示数据的索引KEY</h1>
<ul>
    <li *ngFor="let item of listNews;let key=index;">
        {{key}} --{{item.title}}
    </li>
</ul>

<h1>条件判断</h1>

<div *ngIf="flag">
  <img src="assets/images/02.png" alt="美工">
</div>
<div *ngIf="!flag">
  <img src="assets/images/01.jpg" alt="美工">
</div>

<h1>条件判断 2</h1>
<ul ngSwitch="orderStatus">
  <p *ngSwitchCase=1>
  </p>
  <p *ngSwitchCase=2>
  </p>
  <p *ngSwitchCase=3>
  </p>
</ul>
<h1>[ngClass]</h1>

<div [ngClass]="{'red':true,'blue':flag}" >
  ngClass演示（尽量不要使用dom）
</div>


<strong>循环数组，让数组第一个元素就红色</strong>
<li *ngFor="let item of listNews;let key=index;" [ngClass]="{'red':key ==0,'blue':key ==1}" >
  {{key}} --{{item.title}}
</li>

<br/>

<p [ngStyle]="{'color':attr}" >我是一个P标签</p>

<br/><br/><br/><hr/>

<p>管道把时间戳转化为日期，可以自定义管道</p>
{{today | date:'yyyy-mm-dd hh:mm'}}

<h1>执行事件 {{title2}}</h1>

<button (click)="run()">执行事件按钮</button>
<button (click)="getData()">执行方法获得数据</button>
<button (click)="setData()">执行方法改变数据</button>


<h1>表单事件2</h1>

<input type="text" (keydown)="keydown($event)">

<h1>双向数据绑定 MVVM只是针对表单</h1>

<input type="text" [(ngModel)]='inputValue2'/>
{{inputValue2}}

<button (click)="changeValue()">改变inputVlue2的值</button>
